<script setup lang="ts">
definePage({
  name: 'request',
  style: {
    navigationBarTitleText: '网络请求',
  },
})

const GlobalToast = useGlobalToast()

// Alova 核心特性
const alovaFeatures = [
  {
    icon: '⚡',
    title: '简单易用',
    description: '观看视频5分钟上手',
    details: '极简的API设计，直观的使用方式，让开发者快速掌握并投入使用',
    color: 'blue',
  },
  {
    icon: '🔧',
    title: '完美兼容',
    description: '兼容你最喜欢的技术栈',
    details: '支持Vue、React、Angular等主流框架，以及各种HTTP客户端库',
    color: 'green',
  },
  {
    icon: '🚀',
    title: '高性能模块',
    description: '20+ 高性能的业务模块',
    details: '提供分页、实时数据、文件上传下载等开箱即用的高性能解决方案',
    color: 'purple',
  },
  {
    icon: '🔗',
    title: 'OpenAPI 解决方案',
    description: '更先进的 openAPI 解决方案',
    details: '在代码中和API信息高效交互，自动生成类型定义和请求函数',
    color: 'orange',
  },
  {
    icon: '📦',
    title: '请求共享缓存',
    description: '请求共享和响应缓存',
    details: '智能的请求去重和响应缓存机制，显著提升应用性能',
    color: 'cyan',
  },
  {
    icon: '🛡️',
    title: '类型安全',
    description: '完整的 TypeScript 支持',
    details: '从请求到响应的全链路类型安全，减少运行时错误',
    color: 'red',
  },
]

// 使用真正的 useRequest hook - 获取宠物列表
const {
  data: petData,
  loading: petLoading,
  error: petError,
  send: loadPetData,
} = useRequest(
  (status: 'available' | 'pending' | 'sold' = 'available') =>
    Apis.pet.findPetsByStatus({
      params: { status },
    }),
  {
    immediate: false,
  },
).onError((error) => {
  GlobalToast.error(error.error?.message || '获取宠物列表失败')
})

// 使用真正的 useRequest hook - 用户登录演示
const {
  data: loginData,
  loading: loginLoading,
  error: loginError,
  send: performLogin,
} = useRequest(
  (username: string, password: string) =>
    Apis.user.loginUser({
      params: {
        username,
        password,
      },
    }),
  {
    immediate: false,
  },
).onError((error) => {
  GlobalToast.error(error.error?.message || '用户登录失败')
})

// useRequest 演示函数
function demoLoadPets() {
  loadPetData('available')
}

function demoLogin() {
  performLogin('testuser', 'testpass')
}

// 链接导航处理
function handleNavigate(url: string) {
  // #ifdef H5
  window.open(url, '_blank')
  // #endif
  // #ifndef H5
  uni.setClipboardData({
    data: url,
    showToast: false,
    success: () => {
      uni.hideToast()
      GlobalToast.success(`${url} 已复制到剪贴板`)
    },
  })
  // #endif
}
</script>

<template>
  <view class="page-wrapper">
    <!-- 头部介绍 -->
    <view class="header-container">
      <view class="header-content">
        <view class="header-icon">
          🌐
        </view>
        <view class="header-title">
          Alova 网络请求
        </view>
        <view class="header-subtitle">
          极致高效的请求工具集
        </view>
        <view class="header-description">
          alova完美兼容你最喜欢的HTTP
          client和UI框架，快速开发客户端和服务的应用的业务逻辑，同时让API信息与代码进行交互，像虫洞一样拉近后端协作距离，极致高效地集成你的APIs
        </view>
      </view>
    </view>

    <!-- Alova 核心特性 -->
    <demo-block title="Alova 核心特性" transparent>
      <view class="feature-grid">
        <view v-for="feature in alovaFeatures" :key="feature.title" class="feature-card">
          <view class="feature-header">
            <view class="feature-icon">
              {{ feature.icon }}
            </view>
            <view class="feature-info">
              <view class="feature-title">
                {{ feature.title }}
              </view>
              <view class="feature-description">
                {{ feature.description }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- Alova useRequest 演示 -->
    <demo-block title="useRequest Hook 演示" transparent>
      <view class="request-demos">
        <!-- 宠物列表请求 -->
        <view class="request-card">
          <view class="request-header">
            <view class="request-icon">
              🐾
            </view>
            <view class="request-title">
              宠物列表请求
            </view>
          </view>
          <view class="request-description">
            使用 useRequest 获取宠物列表，支持参数传递和错误处理
          </view>

          <view class="button-container">
            <wd-button type="primary" block :loading="petLoading" @click="demoLoadPets">
              获取宠物列表
            </wd-button>
          </view>

          <!-- 请求状态显示 -->
          <view class="status-display">
            <view v-if="petLoading" class="status-loading">
              <wd-icon name="loading" size="14px" class="loading-icon" />
              正在加载宠物数据...
            </view>
            <view v-if="petError" class="status-error">
              ❌ 请求失败: {{ petError.message }}
            </view>
            <view v-if="petData && !petLoading" class="status-success">
              ✅ 成功获取 {{ petData.length }} 只宠物数据
            </view>
          </view>

          <!-- 代码示例 -->
          <view class="code-example">
            <view class="code-title">
              代码示例:
            </view>
            <view class="code-content">
              const { data, loading, send } = useRequest(\n &nbsp;&nbsp;(status) => Apis.pet.findPetsByStatus({ params:
              { status } }),\n &nbsp;&nbsp;{ immediate: false }\n ).onError((error) => { ... })
            </view>
          </view>
        </view>

        <!-- 用户登录请求 -->
        <view class="request-card">
          <view class="request-header">
            <view class="request-icon">
              👤
            </view>
            <view class="request-title">
              用户登录请求
            </view>
          </view>
          <view class="request-description">
            演示多参数传递和POST请求处理
          </view>

          <view class="button-container">
            <wd-button type="warning" block :loading="loginLoading" @click="demoLogin">
              模拟用户登录
            </wd-button>
          </view>

          <!-- 请求状态显示 -->
          <view class="status-display">
            <view v-if="loginLoading" class="status-loading">
              <wd-icon name="loading" size="14px" class="loading-icon" />
              正在登录中...
            </view>
            <view v-if="loginError" class="status-error">
              ❌ 登录失败: {{ loginError.message }}
            </view>
            <view v-if="loginData && !loginLoading" class="status-success">
              ✅ 登录成功！
            </view>
          </view>

          <!-- 代码示例 -->
          <view class="code-example">
            <view class="code-title">
              代码示例:
            </view>
            <view class="code-content">
              const { data, loading, send } = useRequest(\n &nbsp;&nbsp;(username, password) => Apis.user.loginUser({\n
              &nbsp;&nbsp;&nbsp;&nbsp;params: { username, password }\n &nbsp;&nbsp;}), &nbsp;&nbsp;{ immediate: false
              }\n ).onError((error) => { ... })
            </view>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- 相关链接 -->
    <demo-block title="相关链接" transparent>
      <wd-cell-group border custom-class="custom-cell-group">
        <wd-cell
          title="📚 Alova 官方文档"
          value="alova.js.org"
          is-link
          @click="handleNavigate('https://alova.js.org/')"
        />
        <wd-cell
          title="🐙 GitHub 仓库"
          value="alovajs/alova"
          is-link
          @click="handleNavigate('https://github.com/alovajs/alova')"
        />
        <wd-cell
          title="📖 uni-app 文档"
          value="网络请求"
          is-link
          @click="handleNavigate('https://uniapp.dcloud.net.cn/api/request/request.html')"
        />
        <wd-cell
          title="🎯 Alova Hooks"
          value="请求策略"
          is-link
          @click="handleNavigate('https://alova.js.org/zh-CN/tutorial/client/strategy/')"
        />
        <wd-cell
          title="💡 最佳实践"
          value="使用指南"
          is-link
          @click="handleNavigate('https://alova.js.org/zh-CN/tutorial/project/best-practice/')"
        />
      </wd-cell-group>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-wrapper {
  min-height: 100vh;
  padding: 12px 0;
  background-color: #f7f7f7;
}

.dark .page-wrapper {
  background-color: var(--wot-dark-background);
}

.header-container {
  margin: 0 12px 12px;
}

.header-content {
  padding: 32px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.dark .header-content {
  background-color: var(--wot-dark-background2);
}

.header-icon {
  margin-bottom: 12px;
  font-size: 40px;
}

.header-title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.dark .header-title {
  color: var(--wot-dark-color);
}

.header-subtitle {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.dark .header-subtitle {
  color: var(--wot-dark-color2);
}

.header-description {
  font-size: 12px;
  line-height: 1.6;
  color: #999;
}

.dark .header-description {
  color: var(--wot-dark-color2);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.feature-card {
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .feature-card {
  background-color: var(--wot-dark-background2);
}

.feature-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.feature-icon {
  margin-right: 8px;
  font-size: 20px;
}

.feature-info {
  flex: 1;
}

.feature-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.dark .feature-title {
  color: var(--wot-dark-color);
}

.feature-description {
  font-size: 10px;
  color: #666;
}

.dark .feature-description {
  color: var(--wot-dark-color2);
}

.request-demos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.request-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .request-card {
  background-color: var(--wot-dark-background2);
}

.request-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.request-icon {
  margin-right: 8px;
  font-size: 20px;
}

.request-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .request-title {
  color: var(--wot-dark-color);
}

.request-description {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
}

.dark .request-description {
  color: var(--wot-dark-color2);
}

.button-container {
  margin-bottom: 12px;
}

.status-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-loading {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #2b6cb0;
}

.loading-icon {
  margin-right: 4px;
}

.status-error {
  font-size: 12px;
  color: #c53030;
}

.status-success {
  font-size: 12px;
  color: #2f855a;
}

.code-example {
  margin-top: 12px;
  padding: 12px;
  background-color: #f7fafc;
  border-radius: 8px;
}

.dark .code-example {
  background-color: var(--wot-dark-background3);
}

.code-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: bold;
  color: #4a5568;
}

.dark .code-title {
  color: var(--wot-dark-color);
}

.code-content {
  font-family: monospace;
  font-size: 10px;
  line-height: 1.6;
  color: #666;
}

.dark .code-content {
  color: var(--wot-dark-color2);
}

.custom-cell-group {
  border-radius: 8px !important;
  overflow: hidden;
}
</style>
